<script lang="ts" setup>
import { computed, reactive, ref } from "vue";
import api from "@/api";
import { TransformType, ProxyTransformSaveCmd } from "@/types";
import { ElMessage, type FormInstance, type FormRules } from "element-plus";

const emit = defineEmits(["success"]);

interface State {
  visible: boolean;
  form: ProxyTransformSaveCmd;
}

const state = reactive<State>({
  visible: false,
  form: new ProxyTransformSaveCmd()
});

const title = computed(() => {
  return state.form.id ? "编辑代理转换" : "新建代理转换";
});

const formRef = ref<FormInstance | null>(null);

const rules: FormRules<ProxyTransformSaveCmd> = {
  name: [{ required: true, message: "请输入", trigger: ["blur", "change"] }],
  type: [{ required: true, message: "请选择", trigger: ["blur", "change"] }],
  port: [
    { required: true, message: "请输入", trigger: "blur" },
    { pattern: /^[0-9]*$/, message: "请输入数字", trigger: ["blur", "change"] }
  ],
  socketIp: [
    { required: true, message: "请输入", trigger: ["blur", "change"] },
    {
      pattern:
        /^((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))$/,
      message: "ip格式不正确",
      trigger: ["blur"]
    }
  ],
  socketPort: [
    { required: true, message: "请输入", trigger: ["blur", "change"] },
    { pattern: /^[0-9]*$/, message: "请输入数字", trigger: ["blur", "change"] }
  ]
};

const reset = () => {
  state.form = new ProxyTransformSaveCmd();
  formRef.value?.resetFields();
};

const submit = () => {
  formRef.value?.validate((valid, fields) => {
    if (valid) {
      api.proxyTransform.save(state.form).then((r) => {
        ElMessage.success(r.message);
        emit("success");
        state.visible = false;
      });
    }
  });
};

const openDialog = (id?: string) => {
  state.visible = true;
  if (id) {
    api.proxyTransform.getById(id).then((r) => {
      state.form = r.data;
    });
  }
};

const closeDialog = () => {
  state.visible = false;
};

defineExpose({
  openDialog,
  closeDialog
});
</script>
<template>
  <el-dialog
    v-model="state.visible"
    :title="title"
    :close-on-click-modal="false"
    width="600"
    @open="reset"
    append-to-body
  >
    <div>
      <el-form
        :model="state.form"
        ref="formRef"
        label-width="auto"
        :rules="rules"
        style="max-width: 600px"
      >
        <el-form-item label="转发名称" prop="name">
          <el-input v-model="state.form.name" />
        </el-form-item>
        <el-form-item label="转发类型" prop="type">
          <el-radio-group v-model="state.form.type">
            <el-radio :value="TransformType.Socks4">Socks4</el-radio>
            <el-radio :value="TransformType.Socks5">Socks5</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="代理端口" prop="port">
          <el-input v-model="state.form.port" />
        </el-form-item>
        <el-form-item label="转发IP" prop="socketIp">
          <el-input v-model="state.form.socketIp" />
        </el-form-item>
        <el-form-item label="转发端口" prop="socketPort">
          <el-input v-model="state.form.socketPort" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="state.visible = false">取消</el-button>
        <el-button type="primary" @click="submit"> 确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>
